<template>
  <div>
    <div>
      <div class="Head">
        <ul class="HeadList-Left">
          <li v-for="item in headmsg" :key="item">
            {{ item }}
          </li>
        </ul>
        <ul class="HeadRight">
          <li>登录</li>
          <li class="shopCar">
            <i>
              <img
                src="../public//imgs//icon-cart-checked.png"
                alt=""
                class="car"
              />
            </i>
            购物车
          </li>
        </ul>
      </div>
      <div class="midBox">
        <div class="logo">
          <div class="ImgLogo">
            <img src="../public/imgs//mi-logo.png" alt="" />
          </div>
        </div>
        <div class="Nav">
          <ul v-for="item in nav" :key="item">
            <li @mouseover="show()">
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="SearchBox">
          <i
            ><img src="../public/imgs/icon-search.png" alt="" class="search"
          /></i>
        </div>
      </div>
      <!--  -->
      <div class="box1" v-if="isshow">
        <div class="tv">
          <div class="tvImg">
            <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="" />
          </div>
          <div class="introText"><span>小米壁画电视 65英寸</span></div>
          <div class="price"><span>6999</span></div>
        </div>
        <div class="tv">
          <div class="tvImg">
            <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="" />
          </div>
          <div class="introText"><span>小米壁画电视 65英寸</span></div>
          <div class="price"><span>6999</span></div>
        </div>
        <div class="tv">
          <div class="tvImg">
            <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="" />
          </div>
          <div class="introText"><span>小米壁画电视 65英寸</span></div>
          <div class="price"><span>6999</span></div>
        </div>
        <div class="tv">
          <div class="tvImg">
            <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="" />
          </div>
          <div class="introText"><span>小米壁画电视 65英寸</span></div>
          <div class="price"><span>6999</span></div>
        </div>
        <div class="tv">
          <div class="tvImg">
            <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="" />
          </div>
          <div class="introText"><span>小米壁画电视 65英寸</span></div>
          <div class="price"><span>6999</span></div>
        </div>
        <div class="tv">
          <div class="tvImg">
            <img src="../public/imgs/nav-img/nav-3-1.jpg" alt="" />
          </div>
          <div class="introText"><span>小米壁画电视 65英寸</span></div>
          <div class="price"><span>6999</span></div>
        </div>
      </div>
      <div class="information">
        <div class="goodLeft">红米Note7</div>
        <ul class="goodRight">
          <li>概述</li>
          <li>| 参数 |</li>
          <li>用户评价</li>
        </ul>
      </div>
      <div class="redMi">
        <div class="contentLeft">
          <el-carousel height="700px">
            <el-carousel-item v-for="item of imgList" :key="item.id">
              <img :src="item" alt="" />

              <!-- <h3 class="small">{{ item }}</h3> -->
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="contentRight">
          <h1>红米Note7</h1>
          <P>
            相机全新升级 / 960帧超慢动作 / 手持超级夜景 / 全球首款双频GPS /
            骁龙845处理器 / 红<br />外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏
          </P>
          <h5>小米自营</h5>
          <div class="money">
            <p class="money1">999元</p>
            <p class="money2">4999元</p>
          </div>
          <hr />
          <div class="address">
            <p>北京 北京市 朝阳区 安定门街道</p>
            <p>有现货</p>
          </div>
          <div class="type">
            <h3>选择版本</h3>
            <p class="red">6GB+64GB 全网通</p>
            <p class="gray">4GB+64GB 移动4G</p>
          </div>
          <div class="chose">
            <h3>选择颜色</h3>
            <p class="red">深空灰色</p>
          </div>
          <div class="Price">
            <p>红米Note 76GB+64GB 全网通 深灰色</p>
            <p>999元</p>
            <p>总计:999元</p>
          </div>
          <div class="button">加入购物车</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavHeader",
  data() {
    return {
      headmsg: [
        "小米商城",
        "MIUI",
        "loT",
        "云服务",
        "金融",
        "有品",
        "小爱开发平台",
      ],
      isshow: false,
      nav: ["电视", "小米手机", "RedMi红米", "笔记本", "路由器", "家电"],
      imgList: [
        "http://localhost:8081/static/img/phone-2.205ffcc.jpg",
        "http://localhost:8081/static/img/phone-2.205ffcc.jpg",
        "http://localhost:8081/static/img/phone-3.747342e.jpg",
        "http://localhost:8081/static/img/phone-4.a2589e9.jpg",
        // {
        //   id: 1,
        //   src: "../public/imgs/detail/phone-1.jpg",
        // },
        // {
        //   id: 2,
        //   src: "../public/imgs/detail/phone-2.jpg",
        // },
        // {
        //   id: 3,
        //   src: "../public/imgs/detail/phone-3.jpg",
        // },
        // {
        //   id: 4,
        //   src: "../public/imgs/detail/phone-4.jpg",
        // },
      ],
      currentIndex: 0,
      timer: null,
      type: 1,
    };
  },
  methods: {
    gotoPage(index) {
      this.currentIndex = index;
    },
    show() {
      this.isshow = !this.isshow;
    },
  },
  computed: {
    //上一张
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.box1 {
  position: fixed;
  display: flex;
  z-index: 100;
  margin-left: 50px;
  height: 300px;
  background: white;
}
.el-carousel__item img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.Head {
  background-color: black;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  height: 40px;
}
.Head > ul {
  display: flex;
  list-style: none;
  line-height: 40px;
  padding-left: 40px;
}
.Head > ul > li {
  color: #94949a;
  margin-right: 20px;
}
.HeadRight > .shopCar {
  color: white;
  padding: 0px 20px;
  box-sizing: content-box;
  background-color: #ff6600;
}
.car {
  width: 16px;
}
.logo {
  background-color: #ff6600;
  margin: 40px 40px;
  margin-right: 200px;
}

.midBox {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
}
.Nav > ul {
  list-style: none;
  float: left;
}
.Nav li {
  font-weight: 600;
  margin-right: 20px;
}
.Nav li:hover {
  color: red;
}
.SearchBox {
  margin-left: 500px;
  width: 300px;
  height: 40px;
  border: 1px solid #e4e4e4;
  position: relative;
}
.search {
  width: 20px;
  padding: 10px 20px 10px 20px;
  position: absolute;
  right: 0px;
  color: #6b6b6b;
  border-left: 1px solid #e4e4e4;
}
.information {
  display: flex;
  justify-content: space-between;
}
.goodLeft {
  font-size: 20px;
  font-weight: 700;
  margin-left: 40px;
}
.goodRight {
  display: flex;
  /* margin-left: 100px; */
}
.goodRight > li {
  margin-right: 10px;
  color: #6b6b6b;
}
.redMi {
  display: flex;
  /* flex-direction: column; */
  /* justify-content: space-around; */
}
.redMi .contentLeft {
  /* float: left; */
  width: 50%;
  /* flex-direction: column; */
  /* align-items: ; */
  /* width: 200px; */
}

/*  */
.contentRight {
  width: 50%;
  text-align: left;
}
h5 {
  margin-top: 40px;
  margin-bottom: 10px;
  color: #ff6600;
}
.money {
  display: flex;
}
.money1 {
  font-size: 20px;
  color: #ff6d05;
}
.money2 {
  color: #94949a;
  text-decoration: line-through;
  padding-left: 10px;
}
hr {
  width: 50%;
  border: #c9c9c9;
}
.address {
  width: 50%;
  background: #fafafa;
  padding: 20px;
  margin: 30px 0;
}
.address p {
  margin-bottom: 10px;
}
.address p:nth-child(1) {
  font-size: 16px;
  color: #6f737c;
}
.address p:nth-child(2) {
  font-size: 16px;
  color: #ff6600;
}
.type,
.chose {
  margin-top: 20px;
}
.chose {
  width: 300px;
}
.type p,
.chose p {
  display: inline-block;
  padding: 10px 50px;
  margin-right: 20px;
  margin-top: 20px;
}
.type > .red,
.chose > .red {
  border: 1px solid #ff953d;
  color: #ff953d;
}
.type > .gray,
.chose > .gray {
  border: 1px solid #efefef;
  color: #5d69ab;
}
.Price {
  margin: 30px 0;
  padding: 20px;
  width: 50%;
  background-color: #fafafa;
}
.button {
  width: 200px;
  background-color: #ff6d05;
  color: white;
  text-align: center;
  padding: 10px 0;
}
</style>